<template>
  <basic-dialog
    :visible.sync="visible"
    :title="'商品主管推荐商品'"
    :width="'70%'"
    :handleClose="handleCloseDialog"
    :handleOpened="handleOpened"
    :showFooter="false"
  >
    <el-card shadow="never">
      <el-tabs v-model="tabInfo.selectedTab" @tab-click="handleSwitchTabs">
        <el-tab-pane
          v-for="item in tabInfo.list"
          v-model="item.name"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :disabled="tableInfo.loading"
        />
      </el-tabs>
      <SkusTable
        :showActionCol="tabInfo.selectedTab == 0"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="400"
        :total="total"
        :actionRender="actionRender"
      />
    </el-card>
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SkusTable from '@/components/skusTable';
import skusPage from '@/mixins/commodity/skusPage';
import {
  queryRecommendSkuService,
  submitRelatedSkuService,
  updateTwinsSkuBySkuRecommendService
} from '@/api/sourcing/public';

export default {
  name: 'RecommendGoods',
  mixins: [skusPage],
  components: {
    BasicDialog,
    SkusTable,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    sourceBillId: {
      type: [String, Number],
    },
  },
  data () {
    return {
      tabInfo: {
        selectedTab: '0',
        list: [
          { title: '全部商品', name: '0' },
          { title: '已同意商品', name: '1' },
          { title: '不同意商品', name: '2' },
        ],
      },
    };
  },
  methods: {
    handleOpened () {
      this.initSkuTableColumn()
      this.sourcingBillId = this.sourceBillId
      this.tabInfo.selectedTab = '0'
      this.handleSwitchTabs({ name: this.tabInfo.selectedTab })
    },
    // tab 切换
    handleSwitchTabs (type) {
      this.tableInfo.list = [];
      this.total = 0;
      this.getTableData(type.name)
    },
    actionRender (h, { row }) {
      const { skuRecommendId } = row;
      return (
        <div class="table-action">
          <el-button size="mini" type="text" onClick={() => this.handleSubmit(skuRecommendId, 1)}>同意</el-button>
          <el-button size="mini" type="text" onClick={() => this.handleSubmit(skuRecommendId, 2)}>不同意</el-button>
        </div>
      );
    },
    initSkuTableColumn () {
      this.tableInfo.columns = [
        {
          key: 'sourceSkuCode',
          title: '商品代码',
        },
        {
          key: 'sourceSkuName',
          title: '商品名称',
        },
        {
          key: 'recommendSkuCode',
          title: '推荐商品代码',
        },
        {
          key: 'recommendSkuName',
          title: '推荐商品名称',
        },
      ]
    },
    // 获取商品数据
    async getTableData (agree) {
      const params = {
        agree: agree || 0,
        sourcingBillId: this.sourcingBillId
      }
      const res = await queryRecommendSkuService(params, state => { this.tableInfo.loading = state })
      if (res) {
        this.tableInfo.list = res.data;
      }
    },
    // 同意 or 不同意
    async handleSubmit (id, agree) {
      const params = {
        sourcingBillId: this.sourcingBillId,
        agree,
        idList: [id],
      }
      const res = await submitRelatedSkuService(params, state => { this.tableInfo.loading = state })
      if (res) {
        const { data } = res;
        if (data) {
          return this.$confirm(`${data}`, '提示', {
            confirmButtonText: '确定',
            type: 'warning',
          }).then(() => {
            this.updateSkuBySkuRecommend(id)
          }).catch(() => {});
        }
        this.$message.success('操作成功')
        this.getTableData()
        if (agree == 1) {
          this.$emit('confirm')
        }
      }
    },
    // 同意推荐商品后校验出一物多码后更新商品
    async updateSkuBySkuRecommend (skuRecommendId) {
      const res = await updateTwinsSkuBySkuRecommendService(
        { skuRecommendId },
        state => { this.tableInfo.loading = state }
      )
      if (res) {
        this.$message.success('操作成功')
        this.getTableData()
        this.$emit('confirm')
      }
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
  }
};
</script>
